<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>receipt管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }

        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div id="app1" align="center">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1"><a href="/start/html" target="_blank">药品管理</a></el-menu-item>
            <el-menu-item index="2">划价收费</el-menu-item>
        </el-menu>
    </div>

    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <!--查询表单-->
                <el-form :inline="true">
                    <el-form-item label="病历号">
                        <el-col :span="23">
                            <el-autocomplete
                                    clearable
                                    class="inline-input"
                                    v-model="searchMap.case_id"
                                    :fetch-suggestions="querySearch"
                                    placeholder="请输入病历号"
                                    @select="handleSelect">
                            </el-autocomplete>
                        </el-col>
                    </el-form-item>
                    <el-button class="dalfBut" icon="el-icon-search" @click="fetchData()">查询</el-button>
                    <el-button type="primary" icon="el-icon-circle-plus" class="butT" @click="formVisible=true;pojo={};imageUrl=''">新增</el-button>
                    <el-button class="dalfBut" @click="growUp()">生成收据单</el-button>
                </el-form>
            </div>
            <el-table :data="tableData" border height="450" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column prop="receiptId" label="收据单号" width="120"></el-table-column>
                <el-table-column prop="caseId" label="病历号" width="120"></el-table-column>
                <el-table-column prop="patientName" label="病人姓名" width="120"></el-table-column>
                <el-table-column prop="payee" label="收款人" width="120"></el-table-column>
                <el-table-column label="总价(元)" width="160">
                    <template slot-scope="scope">
                        {{scope.row.total / 100}}
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="日期" width="260"></el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row.receiptId)" icon="el-icon-edit" type="primary" size="small" round>修改
                        </el-button>
                        <el-button @click="dele(scope.row.receiptId)" icon="el-icon-delete-solid" type="danger" size="small" round>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @size-change="fetchData"
                        @current-change="fetchData"
                        :current-page.sync="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size.sync="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <div class="add-form">
                <!--弹出窗口-->
                <el-dialog title="编辑" :visible.sync="formVisible">
                    <el-form label-width="80px">
                        <el-form-item label="病例号">
                            <el-input v-model="pojo.caseId"></el-input>
                        </el-form-item>
                        <el-form-item label="病人名称">
                            <el-input v-model="pojo.patientName"></el-input>
                        </el-form-item>
                        <el-form-item label="付款人">
                            <el-input v-model="pojo.payee"></el-input>
                        </el-form-item>
                        <el-form-item label="总价">
                            <el-input v-model="pojo.total"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="save()">保存</el-button>
                            <el-button @click="formVisible = false">关闭</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>
        </div>
    </div>

</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                medicineTable: [],
                patientPojo: {},
                currentPage: 1,
                total: 10,
                size: 10,
                searchMap: {},
                pojo: {},
                formVisible: false,
                imageUrl: '',
                indexT: 1627737440673,
                activeIndex: '2',
                datas: []
            }
        },
        created() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                axios.post(`/receipt/findReceipt?page=${this.currentPage}&size=${this.size}`, this.searchMap).then(response => {
                    this.tableData = response.data.records;
                    this.total = response.data.total;
                });
                axios.get(`/receipt/findReceipt`).then(response => {
                    this.datas = response.data;
                    this.datas = JSON.parse(JSON.stringify(this.datas).replace(/caseId/g, "value"));
                    // alert(JSON.stringify(this.datas));
                });
            },
            growUp(){
                if (this.searchMap.case_id == null) {
                    alert("请输入病历号!");
                } else {
                    axios.get(`/excel/write?id=${this.searchMap.case_id}`).then(response => {
                        this.indexT = response.data;
                        // alert(this.indexT);
                        if (this.indexT == "error") {
                            alert("药品库存不足,请及时补充！")
                        } else {
                            window.open(`/pdf/template${this.indexT}.pdf`);
                        }
                        this.fetchData();
                    });
                }
            },
            save() {
                axios.post(`/receipt/saveOrUpdate`, this.pojo).then(response => {
                    this.fetchData(); //刷新列表
                    this.formVisible = false;//关闭窗口
                });
            },
            edit(receiptId) {
                this.formVisible = true; // 打开窗口
                // 调用查询
                axios.get(`/receipt/findById?id=${receiptId}`).then(response => {
                    this.pojo = response.data;
                })
            },
            dele(receiptId) {
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/receipt/delete?id=${receiptId}`).then(response => {
                        this.fetchData(); //刷新列表
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            querySearch(queryString, cb) {
                var datas = this.datas;
                var results = queryString ? datas.filter(this.createFilter(queryString)) : datas;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                // 通过药品名称查询
                return (datas) => {
                    return (datas.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            },
            handleChange(value) {
                console.log(value);
            }
        }
    })
</script>
</html>